<template>
  <div class="adminheader">
    <!-- 手机端 -->
    <div class="mobile-menu" v-if="isMobile">
      <div class="mobile-header">
        <img src="@/assets/logo.png" class="logo">
        <img src="@/assets/icon/menu.png" class="menu-icon" @click="toggleMenu">
      </div>
      <el-menu
          v-show="showMenu"
          :default-active="activeIndex"
          class="el-menu-demo"
          :collapse="isCollapse"
          :collapse-transition="false"
          mode="vertical"
          @select="handleMenuSelect"
      >
        <el-menu-item index="1"><img src="@/assets/icon/header_home.png" class="icon"/> 后台首页</el-menu-item>
        <el-menu-item index="2"><img src="@/assets/icon/header_user.png" class="icon"/> 用户管理</el-menu-item>
        <el-menu-item index="3"><img src="@/assets/icon/header_novel.png" class="icon"/> 小说管理</el-menu-item>
        <el-menu-item index="4"><img src="@/assets/icon/chapter.png" class="icon"/> 章节管理</el-menu-item>
        <el-menu-item index="5"><img src="@/assets/icon/header_logout.png" class="icon"/> 退出登录</el-menu-item>
      </el-menu>
    </div>

    <!-- 电脑端 -->
    <div class="pc-menu" v-else>
      <div class="pc-header">
        <img src="@/assets/logo.png" class="logo">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleMenuSelect"
        >
          <el-menu-item index="1"><img src="@/assets/icon/header_home.png" class="icon"/> 后台首页</el-menu-item>
          <el-menu-item index="2"><img src="@/assets/icon/header_user.png" class="icon"/> 用户管理</el-menu-item>
          <el-menu-item index="3"><img src="@/assets/icon/header_novel.png" class="icon"/> 小说管理</el-menu-item>
          <el-menu-item index="4"><img src="@/assets/icon/chapter.png" class="icon"/> 章节管理</el-menu-item>
          <el-menu-item index="5"><img src="@/assets/icon/header_logout.png" class="icon"/> 退出登录</el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
import {ElMenu, ElMenuItem, ElButton, ElNotification} from 'element-plus';
import {ref, computed, onMounted, onBeforeMount} from 'vue';
import { useRouter } from 'vue-router';
import VueCookies from "vue-cookies";
import router from "@/router/index.js";

export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElButton,
  },
  setup() {
    const router = useRouter();
    const activeIndex = ref('1');
    const isCollapse = ref(false);
    const screenWidth = ref(window.innerWidth);
    const showMenu = ref(false);

    // 根据屏幕宽度判断是否为手机端
    const isMobile = computed(() => screenWidth.value < 768);

    // 监听屏幕宽度变化
    window.addEventListener('resize', () => {
      screenWidth.value = window.innerWidth;
    });

    const handleMenuSelect = (index) => {
      activeIndex.value = index;
      VueCookies.set('activeIndex', index);
      switch (index) {
        case '1':
          // 跳转到后台首页
          router.push('/admin/index');
          break;
        case '2':
          router.push('/admin/user');
          break;
        case '3':
          router.push('/admin/novel');
          break;
        case '4':
          router.push('/admin/chapter');
          break;
        case '5':
          // 执行退出登录操作，例如清除 token
          handleLogout();
          break;
        default:
          break;
      }
    };

    const handleLogout = () => {
      // 在这里执行退出登录的逻辑，例如清除 token、跳转到登录页面等
      VueCookies.remove('adminToken'); // 删除 adminToken
      ElNotification({
        message: '退出登录成功！',
        type: 'success',
        duration: 1000
      });
      router.push('/admin/login'); // 重定向到登录页面
    };

    const toggleMenu = () => {
      showMenu.value = !showMenu.value;
    };

    onMounted(() => {
      const savedActiveIndex = VueCookies.get('activeIndex');
      if (savedActiveIndex) {
        activeIndex.value = parseInt(savedActiveIndex);
      }

      const adminToken = VueCookies.get('adminToken'); // 获取 userToken
      if (!adminToken) {
        ElNotification({
          message: '还没有登录！',
          type: 'error',
          duration: 1000
        });
        router.push('/admin/login');
      }
    });



    return {
      activeIndex,
      isCollapse,
      isMobile,
      showMenu,
      handleMenuSelect,
      toggleMenu,
    };
  },
};
</script>

<style scoped>
.adminheader{
  margin-bottom: 25px;
}
.logo {
  width: 130px;
  margin-left: 10px;
}
.menu-icon {
  width: 23px;
  height: 23px;
  cursor: pointer;
  margin-right: 10px;
}
.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.03);
}

.el-menu{
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.03);
}
.pc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.03);
}

.pc-menu {
  display: none;
}
.icon{
  width: 15px;
  margin-right: 5px;
}
@media screen and (min-width: 768px) {
  .logo {
    width: 143px;
  }
  .pc-menu {
    display: block;
  }

  .mobile-menu {
    display: none;
  }
  .el-menu{
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  }
}
</style>
